<template>
  <div>
    <el-card class="mb-10">
      <CategorySelector
        :disabled="showStatus !== SPUSTATUS.SPULIST"
      ></CategorySelector>
    </el-card>
    <el-card>
      <SpuList
        v-if="showStatus === SPUSTATUS.SPULIST"
        v-model="showStatus"
        @spuInfo="changeSpuInfo"
      ></SpuList>
      <SpuForm
        v-if="showStatus === SPUSTATUS.SPUFORM"
        v-model="showStatus"
        :spuInfo="spuInfo"
      ></SpuForm>
      <SkuForm
        v-if="showStatus === SPUSTATUS.SKUFORM"
        v-model="showStatus"
      ></SkuForm>
    </el-card>
  </div>
</template>
<script lang="ts">
//定义枚举

/**
 步骤:
 1. 分析页面
 2. 三个界面切换 - 枚举 - vue3的v-model
 把SpuList和SpuForm的切换先做出来了(禁用状态: 1.spuList新增按钮 2.CategorySelector禁用)
 3. spuList的静态搭建
 4. spu所有涉及到的接口 - ts类型限制(花了很长时间)
 5. spuList 调接口,展示数据
 6. spuFomr的静态展示
 7. spuForm请求接口拿数据 新增拿两个接口数据 修改拿4个接口数据
 ----------------------------------------------------------------
 */
export enum SPUSTATUS {
  SPULIST = 1,
  SPUFORM = 2,
  SKUFORM = 3,
}
</script>
<script setup lang="ts">
import SpuList from "@/views/product/spu/components/SpuList/index.vue";
import SkuForm from "@/views/product/spu/components/SkuForm/index.vue";
import SpuForm from "@/views/product/spu/components/SpuForm/index.vue";
import { ref } from "vue";
import type { SpuModel } from "@/api/spu";
//页面的切换
const showStatus = ref(1);
// 创建一个spu初始值
const initSpuInfo = (): SpuModel => ({
  spuName: "", // spu名称
  description: "", // spu描述
  category3Id: undefined, // 三级分类的id
  tmId: undefined, // 品牌id
  spuSaleAttrList: [], // spu销售属性列表
  spuImageList: [], // spu图片列表
});
const spuInfo = ref<SpuModel>(initSpuInfo());
//接收spuList传过来的数据 传给spuForm进行数据回响
const changeSpuInfo = (row: SpuModel) => {
  spuInfo.value = row;
};
</script>

<style scoped lang="css"></style>
